<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    // 给根节点设置data-theme属性，切换主题色就是修改data-theme的值
    const theme = localStorage.getItem('theme')
    if (!theme) {
      window.document.documentElement.setAttribute('data-theme', 'light')
    } else {
      window.document.documentElement.setAttribute('data-theme', localStorage.getItem('theme'))
      if (theme === 'my') {
        const root = document.querySelector(':root')
        const styleList = JSON.parse(localStorage.getItem('myTheme'))
        Object.keys(styleList).map(key => {
          root.style.setProperty('--' + key, styleList[key])
        })
      }
    }
  }
}
</script>